<template>
  <div class="user-layout">
    <el-container>
      <el-aside width="240px">
        <!-- 用户信息 -->
        <div class="user-info">
          <el-avatar :size="64" :src="userInfo.avatar" />
          <h3>{{ userInfo.username }}</h3>
          <el-tag size="small" type="success">普通用户</el-tag>
        </div>

        <!-- 导航菜单 -->
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :router="true"
        >
          <el-menu-item index="/user/profile">
            <el-icon><User /></el-icon>
            <span>个人中心</span>
          </el-menu-item>
          <el-menu-item index="/user/settings">
            <el-icon><Setting /></el-icon>
            <span>账号设置</span>
          </el-menu-item>
          <el-menu-item index="/user/my-courses">
            <el-icon><Reading /></el-icon>
            <span>我的课程</span>
          </el-menu-item>
          <el-menu-item index="/user/favorites">
            <el-icon><Star /></el-icon>
            <span>我的收藏</span>
          </el-menu-item>
          <el-menu-item index="/user/learning-progress">
            <el-icon><DataLine /></el-icon>
            <span>学习进度</span>
          </el-menu-item>
          <el-menu-item index="/user/notes">
            <el-icon><Notebook /></el-icon>
            <span>学习笔记</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router'
import {
  User,
  Setting,
  Reading,
  Star,
  DataLine,
  Notebook
} from '@element-plus/icons-vue'

const route = useRoute()

// 获取用户信息
const userInfo = computed(() => {
  const storedUserInfo = localStorage.getItem('userInfo');
  if (storedUserInfo) {
    try {
      return JSON.parse(storedUserInfo);
    } catch (e) {
      console.error('Failed to parse userInfo from localStorage in UserLayout:', e);
      return { username: '未登录', email: '', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' }; // 提供默认值
    }
  }
  return { username: '未登录', email: '', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' }; // 提供默认值
});

// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})
</script>

<style scoped>
.user-layout {
  height: 100vh;
  background-color: var(--el-bg-color);
}

.el-container {
  height: 100%;
}

.el-aside {
  background-color: var(--el-bg-color-overlay);
  border-right: 1px solid var(--el-border-color-light);
  display: flex;
  flex-direction: column;
}

.user-info {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid var(--el-border-color-light);
}

.user-info h3 {
  margin: 10px 0 5px;
  font-size: 16px;
  color: var(--el-text-color-primary);
}

.user-info p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--el-text-color-secondary);
}

.el-menu-vertical {
  border-right: none;
  flex: 1;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 240px;
}

.el-main {
  padding: 20px;
  background-color: var(--el-bg-color-page);
}
</style> 